<template>
  <el-form ref="invoiceRuleForm" :model="invoiceInfo" :rules="rules" class="lineHeight32" label-width="110px" label-position="right">
    <el-row type="flex" class="response-el-row">
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="发票编号" prop="no">
          <el-input
            :value="invoiceInfo.no"
            :disabled="invoiceStatus === 1"
            placeholder=""
            name="no"
            type="text"
            maxlength="16"
            @input="textInputChange($event, 'no')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="发票号码" prop="number">
          <el-input
            :value="invoiceInfo.number"
            :disabled="invoiceStatus === 1"
            placeholder=""
            name="number"
            type="text"
            maxlength="16"
            @input="textInputChange($event, 'number')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="附件" prop="attachment">
          <upAttachment
            :import-api="'/admin/invoice/file/import'"
            :hide-confirm="true"
            :limit="1"
            :file-list="attachmentList"
            btn-text="上传文件"
            @upProgress="upProgress"
            @complateSetData="complateSetData"
            @removeFileList="clearFile" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import upAttachment from '@/components/Common/upAttachment/index';
export default {
  name: 'InvoiceInfoEdit',
  components: { upAttachment },
  props: {
    invoiceInfo: {
      type: Object,
      default: () => {
        return {
          no: '',
          number: '',
          attachment: '',
          attachmentUrl: ''
        };
      }
    },
    invoiceStatus: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      rules: {
        // 'no': [{ required: true, message: '请输入发票编号', trigger: 'change' }]
      }
    };
  },
  computed: {
    attachmentList() {
      if (this.invoiceInfo && this.invoiceInfo.attachment) {
        return [{
          name: this.invoiceInfo.attachment,
          url: this.invoiceInfo.attachmentUrl
        }];
      }
      return [];
    },
    formDataIsValid() {
      // const { invoiceInfo: { no }} = this;
      let isValid = true;
      if (this.$refs.invoiceRuleForm) {
        const { fields } = this.$refs.invoiceRuleForm;
        isValid = !fields.some(item => item.validateState === 'error');
      }
      const result = !!(isValid);
      this.$emit('update:formValid', result);
      return result;
    }
  },
  methods: {
    textInputChange(text, prop) {
      const invoiceInfo = { ...this.invoiceInfo };
      invoiceInfo[prop] = text;
      this.$emit('update:invoiceInfo', invoiceInfo);
    },
    upProgress() {
      this.createLoading = true;
    },
    // 用于手动触发表单验证
    triggerFormValidate() {
      this.$refs.invoiceRuleForm.validate();
    },
    complateSetData({ data, fileName }) {
      const url = typeof data === 'string' ? data : data.url;
      this.createLoading = false;
      // this.file = data;
      // this.fileName = fileName;
      const invoiceInfo = { ...this.invoiceInfo };
      invoiceInfo['attachment'] = fileName;
      invoiceInfo['attachmentUrl'] = url;
      this.$emit('update:invoiceInfo', invoiceInfo);
      console.log(data);
      // this.$message({ type: 'success', message: '上传成功' });
    },
    clearFile() {
      const invoiceInfo = { ...this.invoiceInfo };
      invoiceInfo['attachment'] = '';
      invoiceInfo['attachmentUrl'] = '';
      this.$emit('update:invoiceInfo', invoiceInfo);
    }
  }
};
</script>
<style lang="scss">
.invoice-info-edit-box {
  .el-tag.el-tag--info {
    color: #333333;
    background-color: #FAFAFC;
  }
}

</style>
